<form [formGroup]="formModel" (ngSubmit)="onSearch()" novalidate>
    <div class="form-group" [class.has-error]="formModel.hasError('minlength', 'title')">
      <label for="productTitle">商品名称：</label>
      <input type="text" formControlName='title' placeholder="商品名称" class="form-control">
      <!-- class="help-block" [class.hidden] 在一起用有效果 -->
      <span class="help-block" [class.hidden]="!formModel.hasError('minlength', 'title')">商品名称长度至少3位</span>
    </div>

    <div class="form-group" [class.has-error]="formModel.hasError('positiveCheck', 'price')">
      <label for="product">商品价格：</label>
      <input type="number" formControlName="price" placeholder="商品价格" class="form-control">
      <span [hidden]="!formModel.hasError('positiveCheck','price')">
        {{formModel.getError('positiveCheck','price')}}
      </span>
    </div>

    <div class="form-group">
      <label for="productCategory">商品类别：</label>
      <select formControlName="category" id="productCategory" class="form-control">
        <option value="-1">全部商品类别</option>
        <option *ngFor="let category of categorys" [value]="category">{{category}}</option>
      </select>
    </div>

    <div class="from-group">
      <button [disabled]="!formModel.valid" type="submit" class="btn btn-primary btn-block">搜索</button>
    </div>

</form>